// 手机黑夜模式
@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #fff;
    }
}

// flex 布局
@mixin flex($direction: row, $justify: flex-start, $align: center) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify;
    align-items: $align;
}

@mixin flex-start {
    @include flex(row, flex-start, center);
}

@mixin flex-center {
    @include flex(row, center, center);
}

@mixin flex-between {
    @include flex(row, space-between, center);
}

@mixin flex-around {
    @include flex(row, space-around, center);
}

@mixin flex-column {
    @include flex(column, center, center);
}

@mixin flex-column-between {
    @include flex(column, center, space-between);
}

@mixin flex-column-around {
    @include flex(column, center, space-around);
}



$breakpoints: ('phone':(320px, 480px),
    'pad':(481px, 768px),
    'notebook':(769px, 1024px),
    'desktop':(1025px, 1200px),
    'tv':(1201px));

// 简化媒介查询
@mixin respond-to($breakpoint) {
    $bp: map-get($breakpoints, $breakpoint);

    @if type-of($bp)=='list' {
        $min: nth($bp, 1);
        $max: nth($bp, 2);

        @media (min-width: $min) and (max-width: $max) {
            @content;
        }
    }

    @else {
        @media (min-width: $bp) {
            @content;
        }
    }
}


// 测试
.header {
    color: blue;
    @include flex-start;

    @include respond-to(phone) {
        color: red;
    }

    @include respond-to(pad) {
        color: green;
    }
}

.footer {
    font-size: 12px;

    @include respond-to(phone) {
        font-size: 14px;
    }

    @include respond-to(pad) {
        font-size: 16px;
    }
}